/*
 author : Alex Tan
 create time : 2017-07-15
 */

class ForSaveUserInfoPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {user: ''}
    }

    componentDidMount() {
        let reactObj = this;
        layui.use(['layer', 'form'], function () {
            let form = layui.form();
            form.render();
            postJson("/user/getCurrentUser.x", null, function (data) {
                reactObj.setState({user: data.data});
            });

            form.on("submit(sb)", function () {
                if(reactObj.refs.password.value != reactObj.refs.secPassword.value){
                    layui.layer.msg("两次密码不一致,请重新输入!");
                    return;
                }
                let params = {};
                params.userCode = reactObj.state.user.userCode;
                params.logName = reactObj.state.user.logName;
                params.userName = reactObj.refs.name.value;
                params.telNum = reactObj.refs.phone.value;
                params.emailAddress = reactObj.refs.email.value;
                params.logPwd = reactObj.refs.password.value;
                console.log(params);
                postJson("/user/updateUserInfo.x", $.param(params), function (data) {
                    layui.layer.alert("提交成功", function (index) {
                        layui.layer.close(index);
                        let parentindex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(parentindex);
                    })
                });
                return false;
            });
        });
    }

    inputChange() {
        this.state.user.userName = this.refs.name.value;
        this.state.user.telNum = this.refs.phone.value;
        this.state.user.emailAddress = this.refs.email.value;
        this.setState({});
    }

    render() {
        let showTitle = this.props.popup == 'true'?{display:"none"}:{};
        let showPassword = this.props.popup == 'true'?{}:{display:"none"};
        return <div className="row col-lg-6">
            <div className="box box-primary">
                <div className="box-frame">
                    <div className="box-header with-border" style={showTitle}>
                        <h3 className="box-title">管理员信息</h3>
                    </div>
                    <div className="box-body">
                        <form className="layui-form layui-form-pane">
                            <div className="layui-form-item">
                                <div className="layui-inline">
                                    <label className="layui-form-label">姓名</label>
                                    <div className="layui-input-inline">
                                        <input type="text" name="username" className="layui-input" data-verify="required" ref="name" value={this.state.user.userName}
                                               onChange={() => this.inputChange()}/>
                                    </div>
                                </div>
                            </div>

                            <div className="layui-form-item">
                                <label className="layui-form-label">电话</label>
                                <div className="layui-input-inline">
                                    <input type="text" name="telNum" className="layui-input" data-verify="required" ref="phone" value={this.state.user.telNum}
                                           placeholder="保存后可使用手机号进行登录" onChange={() => this.inputChange()}/>
                                </div>
                            </div>

                            <div className="layui-form-item">
                                <label className="layui-form-label">邮箱</label>
                                <div className="layui-input-inline">
                                    <input type="text" name="emailAddress" className="layui-input" data-verify="email" ref="email" value={this.state.user.emailAddress}
                                           placeholder="用于找回密码时接收验证码" onChange={() => this.inputChange()}/>
                                </div>
                            </div>

                            <div className="layui-form-item" style={showPassword}>
                                <label className="layui-form-label">修改密码</label>
                                <div className="layui-input-inline">
                                    <input type="password" name="emailAddress" className="layui-input" ref="password"
                                           placeholder="第一次输入" />
                                </div>
                            </div>

                            <div className="layui-form-item" style={showPassword}>
                                <label className="layui-form-label">确认密码</label>
                                <div className="layui-input-inline">
                                    <input type="password" name="emailAddress" className="layui-input"  ref="secPassword"
                                           placeholder="第二次输入" />
                                </div>
                            </div>
                            <button className="layui-btn layui-btn-normal" type="button" data-submit data-filter="sb">
                                确定
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    }
}

ReactDOM.render(<ForSaveUserInfoPage popup={$.query.get("popup")}/>, document.getElementById("forSaveUserInfo"));